<template>
  <keep-alive>
    <div style="margin-bottom: 50px; overflow: hidden">
      <!-- 
        @shuaixuan="cateShuaiXuan"  //不加就是传过来的值
        @shuaixuan="cateShuaiXuan()" //加了接收不到，或者在（）里面加值改变传过来的值
     -->
      <SearchScreenNav
        :hide-goback="true"
        @shuaixuan="cateShuaiXuan"
      ></SearchScreenNav>

      <div class="srcview">
        <div class="src-left">
          <van-sidebar v-model="active" @change="onChange">
            <van-sidebar-item v-for="(value, i) in 16" :key="i">
              <template #title>
                <div style="margin-left: 1rem; font-size: 16px">{{ i }}</div>
              </template>
            </van-sidebar-item>
          </van-sidebar>
        </div>

        <div class="src-right">
          <!-- 商品tabs标签栏 -->
          <div v-if="active !== 0">
            <van-tabs
              v-model:active="tabActive"
              animated
              @click-tab="onClickTab"
            >
              <van-tab v-for="(item, i) in tabsList" :title="item">
                <template #title>
                  <div style="font-size: 12px">
                    {{ item
                    }}<van-icon
                      v-if="i != 0"
                      name="https://cdn-gdcws-imgs.gdcws.cn/zhunong/20240124/jkuohao.png"
                    />
                  </div>
                </template>
              </van-tab>
            </van-tabs>
          </div>

          <!-- van-pull-refresh + van-list 上下拉刷新 -->
          <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <div v-if="active == 0">
                <div class="brand-title">
                  <div class="line"></div>
                  <div class="title">推荐品牌</div>
                  <div class="line"></div>
                </div>

                <van-grid style="margin-right: 1.25rem" :column-num="4">
                  <van-grid-item
                    v-for="value in 24"
                    :key="value"
                    icon="photo-o"
                    text="文字"
                    to=""
                    @click="brandDetails('1')"
                  />
                </van-grid>

                <div class="brand-title">
                  <div class="line"></div>
                  <div class="title">所有品牌</div>
                  <div class="line"></div>
                </div>

                <!-- 自定义索引列表 -->
                <!-- <van-index-bar :index-list="indexList">
            <div v-for="(item, i) in titleList" :key="i">
              <van-index-anchor :index="item" />
              <van-cell
                :title="item"
                v-for="data in item.list"
                :key="data.cityId"
              />
            </div>
          </van-index-bar> -->
                <!-- 索引列表 -->
                <van-index-bar>
                  <van-index-anchor index="A" />
                  <van-cell
                    v-for="(item, i) in titleList"
                    :key="i"
                    :title="item"
                    @click="brandDetails('0')"
                  />
                </van-index-bar>
              </div>

              <div v-else>
                <!-- collection商品列表 -->
                <!-- 弹性布局，换行 -->
                <div
                  style="
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-around;
                  "
                >
                  <GoodsItem
                    :is-line="true"
                    v-for="good in list"
                    :goods="good"
                    :key="good.id"
                    @cellclick="cellClick"
                  />
                </div>
                <!-- <van-grid :column-num="2">
                <van-grid-item
                  v-for="value in list"
                  :key="value"
                  icon="photo-o"
                  text="文字"
                />
              </van-grid> -->
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>

      <div style="position: absolute">
        <!-- 抽屉 -->
        <DrawerView
          :show="showRight"
          @clickoverlay="onClickOverlay"
          v-show="showRight"
        ></DrawerView>
      </div>
    </div>
  </keep-alive>
</template>

<script setup>
import { ref } from "vue";
import { showToast } from "vant";
import GoodsItem from "@/views/category/components/GoodsItem.vue";
import SearchScreenNav from "@/views/category/components/SearchScreenNav.vue";
import DrawerView from "@/views/category/components/DrawerView.vue";
import { useRouter } from "vue-router";

const router = useRouter();

// const searchClick = () => {

// }

//左边选中index
const active = ref(0);

//左边选中事件
const onChange = (index) => {
  showToast(`标签名 ${index + 1}`);
  onRefresh();
};

// tabs数组
const tabsList = ["综合", "事件", "价格", "品牌"];
const tabActive = ref(0);

// 索引数组
const indexList = ref(["A", "B", "C", "D", "E", "F", "G", "H", "I"]);

//每个索引数组的子数组
const titleList = ref([
  "标题1",
  "标题2",
  "标题3",
  "标题4",
  "标题5",
  "标题6",
  "标题7",
  "标题8",
  "标题9",
  "标题10",
]);

// 下拉刷新
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = [];
      refreshing.value = false;
    }

    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }
    loading.value = false;

    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};
const onRefresh = () => {
  // 清空列表数据
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  onLoad();
};

// tab控件点击事件
const onClickTab = (obj) => {
  console.log(obj);
  showToast(obj.title);
};

const showRight = ref(false);
// 帅选 子组件向父组件传值
// 帅选
const cateShuaiXuan = (data) => {
  console.log("帅选");
  showRight.value = true;
};
// 点击蒙层
const onClickOverlay = () => {
  console.log("----------");
  showRight.value = false;
};

// cell点击事件
const cellClick = (item) => {
  console.log("<<<<<<<<<<");
  console.log(item);
  console.log(">>>>>>>>>>");
  router.push({
    path: "/category/goodsdetails",
  });
};

// 品牌详情
const brandDetails = (isRecommendBrand) => {
  // console.log(isRecommendBrand);
  // 路由页面之间的传值，发出
  router.push({
    path: "/category/branddetails",
    query: { isRecommendBrand: isRecommendBrand },
  });
};
</script>

<style lang="scss" scoped>
// 搜索顶部view
.topview {
  position: relative;
  display: flex;
  height: 44px;
  //容器内部所有元素的对齐方式
  align-items: center;
  //容器内元素的文本对齐方式
  text-align: right;
  background-color: #fff;
  .search {
    flex: 1;
    margin-left: 1.5rem;
    height: 30px;
    background-color: #666666;
    border-radius: 15px;
    .x-img {
      margin-right: 5px;
      margin-top: 5px;
      width: 15px;
      height: 15px;
      background: url("https://img0.baidu.com/it/u=642967298,3358188151&fm=253&fmt=auto&app=138&f=JPEG?w=260&h=260")
        no-repeat;
      background-size: 100% 100%;
    }
  }
  .t-btn {
    border: none;
    height: 100%;
    width: 60px;
    background-color: #fff;
  }
}

// 下面滚动区域
.srcview {
  margin-top: 2.75rem;
  // position: relative; /* 确保父级元素相对于自身进行定位 */
  display: flex;
  overflow: hidden;
  .src-left {
    overflow-y: scroll; /* 添加垂直滚动条 */
    height: 100vh; /* 设置高度限制滚动区域大小 */
  }
  .src-right {
    flex: 1;
    overflow-y: scroll; /* 添加垂直滚动条 */
    height: 100vh; /* 设置高度限制滚动区域大小 */
  }
}

// 品牌顶部view
.brand-title {
  display: flex;
  height: 32px;
  align-items: center;
  // 容器内元素水平布局
  justify-content: center;
  margin-top: 16px;

  .title {
    width: 60px;
    line-height: 100%;
    margin-right: 4px;
    margin-left: 4px;
  }
  .line {
    height: 1px;
    // flex: auto;
    width: 1rem;
    background-color: #666666;
  }
}
</style>
